<template>
	<div>
		<div class="clearfloat" style="float: left;">
			<el-button type="primary" @click="addSection = true">添加章节</el-button>
		</div>
		<el-table :data="data" >
			<el-table-column prop="sectionId" label="章节id" width="180px">
			</el-table-column>
			<el-table-column prop="sectionName" label="章节名称" width="700px">
			</el-table-column>

			<el-table-column label="操作" width="500px">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" icon="el-icon-edit" @click="toUpdateSection(scope.row)">修改</el-button>
					<el-button type="primary" size="mini" @click="getDetail(scope.row)">查看小节</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="小节管理" :visible.sync="partSection">
			<div class="clearfloat" style="float: left;">
			<el-button type="primary" @click="addPartsection = true">添加小节</el-button>
		</div>
			<el-table :data="partSections">
				<el-table-column property="partIdName" label="目录" width="150"></el-table-column>
				<el-table-column property="partName" label="小节" width="200"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="toVideo(scope.row.partId)">添加视频</el-button>
						<el-button type="primary" size="mini" icon="el-icon-edit" @click="toUpdatePart(scope.row)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>

		<el-dialog title="添加章节" :visible.sync="addSection ">
			<el-form :model="addsection">
				<el-form-item label="章节名称" >
					<el-input style="width: 300px;" v-model="addsection.sectionName" ></el-input>
				</el-form-item>
				<el-form-item label="添加日期" prop="sectionAddtime">
					<el-date-picker v-model="addsection.sectionAddtime" type="date" placeholder="选择日期" value-format="yyyy/MM/dd">
					</el-date-picker>
				</el-form-item>
				
				<el-form-item label="所属课程" prop="courseId">
					<el-select v-model="addsection.courseId" placeholder="请选择">
						<el-option v-for="item in courses" :key="item.courseId" :label="item.courseName" :value="item.courseId">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
    			<el-button @click="addSection  = false">取 消</el-button>
   				<el-button type="primary" @click="sectionAdd">确 定</el-button>
 			 </span>
		</el-dialog>

		<el-dialog title="修改章节" :visible.sync="updateSection ">
			<el-form :model="section">
				<el-form-item label="章节名称" >
					<el-input style="width: 300px;" v-model="section.sectionName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="所属课程" prop="courseId">
					<el-select v-model="section.courseId" placeholder="请选择">
						<el-option v-for="item in courses" :key="item.courseId" :label="item.courseName" :value="item.courseId">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="sectionUpdate1">确 定</el-button>
					<el-button @click="updateSection  = false">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog title="添加小节" :visible.sync="addPartsection">
			<el-form :model="partsection" label-width="180px">
				<el-form-item label="小节编号名：">
					<el-input v-model="partsection.partIdName"></el-input>
				</el-form-item>
					
				<el-form-item label="小节名称：">
					<el-input v-model="partsection.partName"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
   				<el-button @click="addPartsection=false">取 消</el-button>
    			<el-button type="primary" @click="addPart">确 定</el-button>
 			 </span>
		</el-dialog>
		<el-dialog title="修改小节" :visible.sync="updatePart ">
			<el-form :model="updatepartsection">
				<el-form-item label="小节编号名：">
					<el-input v-model="updatepartsection.partIdName"></el-input>
				</el-form-item>
				<el-form-item label="小节名称" >
					<el-input v-model="updatepartsection.partName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="partSectionUpdate1">确 定</el-button>
					<el-button @click="updatePart  = false">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<el-dialog title="添加视频" :visible.sync="addvideo">
			<el-form :model="video" label-width="180px">

				<el-form-item label="视频名称：">
					<el-input v-model="video.videoName"></el-input>
				</el-form-item>
				<el-upload class="upload-demo" action="/api/teacher/video/upload" :on-preview="handlePreview" 
					:on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" 
					accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,.csv,text/plain"

					:on-exceed="handleExceed" :file-list="fileList" :onError="uploadError" :onSuccess="uploadSuccess">
					 <el-button size="small" type="primary">上传视频</el-button>
				</el-upload>	
			</el-form>
			<span slot="footer" class="dialog-footer">
   				<el-button @click="addvideo=false">取 消</el-button>
    			<el-button type="primary" @click="saveVideo">确 定</el-button>
 			 </span>
		</el-dialog>
	</div>
</template>

<script>
	import { sectionList, sectionInsert, sectionUpdate, partSectionInsert, partSectionUpdate, partSectionDelete, videoInsert } from '@/axios/api'
	import {formatDate} from '@/axios/date.js'
	export default {
		data() {
			return {

				data: [],
				partSections: [],
				partSection: false,
				addSection: false,
				addsection: {
					scoreId: 1,
					sectionTestId: 1,
					courseId: 1,
					teacherId: 1,
					sectionName: '',
					sectionAddtime: '',
					sectionModifyPerson: '0',
					sectionModifyDate: '',
					sectionDelete: 1
				},
				courses: [{
						courseId: 1,
						courseName: '化学2',
					},
					{
						courseId: 2,
						courseName: 'c语言1',
					},
					{
						courseId: 35,
						courseName: '英语1',
					},
					{
						courseId: 40,
						courseName: '环艺',
					},
				],

				section: {
					sectionId: 1,
					scoreId: 1,
					sectionTestId: 1,
					courseId: 1,
					teacherId: 1,
					sectionName: '',
					sectionAddtime: '',
					sectionModifyPerson: '0',
					sectionModifyDate: '',
					sectionDelete: 1
				},

				addPartsection: false,
				partsection: {
					
					sectionId:1,
					partIdName:'',
					partName:'',
					partFrequence:1,
					partAddtime:'',
					partModifyPerson:'zhangsan',
					partModifyDate:'',
					partDelete: 1
				},
				updatepartsection: {
						sectionId: 1,
						partIdName: '',
						partName: '',
						partFrequence: 1,
						partAddtime:'',
						partModifyPerson:'zhangsan',
						partModifyDate:'',
						partDelete:1
				},
				updateSection: false,
				updatePart: false,
				video:{
					
					partId:1,	
					videoName:'',	
					videoPath:'',	
					videoAdduser:'zhangsan',	
					videoAddtime:'',
					videoDelete:1
				},
				addvideo:false,
				fileList: []
				

			}

		},
		methods: {
			/*查看小节列表
			 */
			getDetail(row) {
			console.log(row),
			this.partsection.sectionId=row.sectionId,
				this.partSections = row.partSections,
					this.partSection = true

			},
			/*显示章节列表*/
			sectionList1() {

				sectionList().then(res => {
					this.data = res.resData

				})
			},

			/*添加章节*/
			sectionAdd() {
				console.log(this.addsection),
				/*获取当前时间，并格式化*/
				this.addsection.sectionModifyDate=formatDate(new Date(),"yyyy/MM/dd");
				sectionInsert(this.addsection).then(res => {
					if(res.status == 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.addsection.sectionName='',
						this.addsection.sectionAddtime='',
						this.addSection=false,
						this.sectionList1();
					} else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消添加'
					});
				});
			},
			/*修改章节*/
			toUpdateSection(section) {
				//this.section=section,
				
				this.section = section,
				console.log(this.section),
				this.updateSection = true

			},
			sectionUpdate1() {
				
				this.section.sectionAddtime=formatDate(new Date(this.section.sectionAddtime),"yyyy/MM/dd");
				this.section.sectionModifyDate=formatDate(new Date(),"yyyy/MM/dd");
				console.log(this.section),
				sectionUpdate(this.section).then(res => {
					
					if(res.status == 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.updateSection=false,
						this.sectionList1();
					} else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改'
					});
				});
			},
			
			/*添加小节*/
			addPart() {
				
				
				console.log(this.partsection),
				/*获取当前时间，并格式化*/
				this.partsection.partAddtime=formatDate(new Date(),"yyyy/MM/dd");
				this.partsection.partModifyDate=formatDate(new Date(),"yyyy/MM/dd");
				partSectionInsert(this.partsection).then(res => {
					if(res.status == 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.partsection.partIdName='',
						this.partsection.partName='',
						this.addPartsection=false,
						this.partSection=false,
						this.sectionList1();
					} else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消添加'
					});
				});
			},
			
			
			
			
			
			/*修改小节*/
			toUpdatePart(partsection) {
				//console.log(partSection),
				this.updatepartsection = partsection,
					this.updatePart = true
			},
			partSectionUpdate1() {
				console.log(this.updatepartsection),
				this.updatepartsection.partAddtime=formatDate(new Date(this.updatepartsection.partAddtime),"yyyy/MM/dd");
				this.updatepartsection.partModifyDate=formatDate(new Date(),"yyyy/MM/dd");
				console.log(this.updatepartsection);
				partSectionUpdate(this.updatepartsection).then(res => {
					if(res.status == 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.updatePart = false,
						this.sectionList1();
						
					} else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消修改'
					});
				});
			},
			// 上传成功后的回调
			uploadSuccess(response, file, fileList) {
				console.log('上传文件', response, fileList),
				this.video.videoPath=response.resData
				//this.addForm.coursewareSize=fileList.size
			},
			// 上传错误
			uploadError(response, file, fileList) {
				this.$message({
							message: '上传失败，请重试',
							type: 'info'
					})
			},

			handleRemove(file, fileList) {
				console.log(file, fileList);
			},
			//点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据
			handlePreview(file) {
				console.log('文件', file);
			},
			handleExceed(files, fileList) {
				this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
			},
			beforeRemove(file, fileList) {
				return this.$confirm(`确定移除 ${ file.name }？`);
			},
			/*添加视频*/
			toVideo(partId){
				console.log(partId),
				this.video.partId=partId,
				this.addvideo=true
			},
			saveVideo() {
				
				/*获取当前时间，并格式化*/
				this.video.videoAddtime=formatDate(new Date(),"yyyy/MM/dd");
				console.log(this.video),
				videoInsert(this.video).then(res => {
					if(res.status == 200) {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.addvideo=false,
						this.sectionList1();
					} else {
						this.$message({
							message: res.message,
							type: 'info'
						})
					};
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消添加'
					});
				});
			}
			
			
			
			

		},

		mounted() {
			this.sectionList1();
			let user = localStorage.getItem('teacher-user');
			if(user) {
				user = JSON.parse(user);
				this.addsection.teacherId=user.teacherId;
				this.section.teacherId=user.teacherId
			}
		}
	}
</script>
<style type="text/css" scoped="scoped">
	/*清除浮动*/
	
	.clearfloat {
		zoom: 1;
	}
	
	.clearfloat:after {
		display: block;
		height: 0;
		content: "";
		clear: both;
		visibility: hidden;
	}
</style>